<!--
 * @Author: your name
 * @Date: 2021-09-08 15:01:32
 * @LastEditTime: 2021-09-09 09:16:22
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ej-webui\src\pages\employee\details\index.vue
-->
<template>
  <div>
    <div class="demo-type">
      <el-avatar
        :size="80"
        :src="userData.userFace"
        style="margin-left: 200px; margin-top: 20px"
      >
        <img
          src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
        />
      </el-avatar>
      <el-link
        type="success"
        style="margin-left: 900px"
        @click="dialogVisible = true"
        >修改头像</el-link
      >
    </div>
    <el-divider></el-divider>
    <el-form label-width="80px" :model="userData" size="small">
      <el-form-item label="登录用户">
        {{ userData.username }}
      </el-form-item>
      <el-form-item label="用户姓名">
        {{ userData.realname }}
      </el-form-item>
      <el-form-item label="用户手机">
        {{ userData.telephone }}
      </el-form-item>
      <el-form-item label="用户性别">
        <div v-if="userData.gender == 'male'">
          男<i class="el-icon-male"></i>
        </div>
        <div v-else-if="userData.gender == 'female'">女<i class="el-icon-female"></i></div>
        <div v-else>暂无</div>
      </el-form-item>
      <el-form-item label="用户角色">
        {{ userData.roles[0].name }}
      </el-form-item>
      <el-form-item label="用户生日">
        <span v-if="userData.birth">{{ userData.birth }}</span>
        <span v-else>暂无</span>
      </el-form-item>
      <el-form-item label="注册时间">
        {{ userData.registerTime }}
      </el-form-item>
      <el-form-item label="邮箱">
        <span v-if="userData.email">{{ userData.email }}</span>
        <span v-else>暂无</span>
      </el-form-item>
      <el-form-item label="用户状态">
        <el-tag v-if="userData.status == '正常'" type="success">正常</el-tag>
        <el-tag v-else type="danger">未审核</el-tag>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <el-link
      type="success"
      style="float: right; margin-right: 20px"
      @click="visible2 = true"
      >修改个人信息</el-link
    >
    <!-- 修改头像模态框 -->
    <el-dialog
      title="更改头像"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-upload
        class="avatar-uploader"
        action="http://81.69.24.232/pet/jz_upload.php"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <img v-if="imgUrl" :src="imgUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeTable">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改个人信息模态框 -->
    <el-dialog
      title="修改个人信息"
      :visible.sync="visible2"
      @close="dialogCloseHandler"
    >
      <el-form :model="userData" :rules="rules" ref="saveForm">
        <el-form-item
          label="登录用户"
          :label-width="formLabelWidth"
          prop="username"
        >
          <el-input v-model="userData.username" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item
          label="姓名"
          :label-width="formLabelWidth"
          prop="realname"
        >
          <el-input
            v-model="userData.realname"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="性别"
          :label-width="formLabelWidth"
          size="mini"
          prop="gender"
        >
          <el-radio v-model="userData.gender" label="male">男</el-radio>
          <el-radio v-model="userData.gender" label="female"
            >女</el-radio
          > </el-form-item
        ><el-form-item
          label="用户手机"
          :label-width="formLabelWidth"
          prop="telephone"
        >
          <el-input
            v-model="userData.telephone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="用户邮箱"
          :label-width="formLabelWidth"
          prop="email"
        >
          <el-input
            v-model="userData.email"
            placeholder="请输入用户邮箱"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="出生日期"
          :label-width="formLabelWidth"
          size="mini"
          prop="status"
        >
          <div class="block">
            <el-date-picker
              v-model="userData.registerTime"
              type="date"
              placeholder="请选择出生日期"
              value-format="timestamp"
            >
            </el-date-picker>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible2 = false">取 消</el-button>
        <el-button type="primary" @click="saveTable">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import qs from 'qs'
export default {
  data() {
    return {
      userData: {},
      imgUrl: null,
      dialogVisible: false,
      imgData: {
        id: null,
        userface: null
      },
      visible2: false,
      formLabelWidth: '80px',
      rules: {
        realname: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async getUserData() {
      let id = this.$route.params.id
      let res = await request.get('/baseUser/findUserDetailsById', {
        params: { id }
      })
      this.userData = res.data
    },
    handleAvatarSuccess(res, file) {
      this.imgUrl = res
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    changeTable() {
      this.imgData.id = this.userData.id
      this.imgData.userface = this.imgUrl
      request.post('/baseUser/alterUserface', qs.stringify(this.imgData)).then(res => {
        this.getUserData()
        this.$message.success(res.message)
        this.dialogVisible = false
      })
    },
    saveTable() {
      this.$refs['saveForm'].validate((valid) => {
        if (valid) {
          request.post("/baseUser/saveOrUpdate", qs.stringify(this.userData)).then(res => {
            this.getUserData()
            this.$message.success(res.message)   //提示操作结果
            this.visible2 = false
          })
        } else {
          return false
        }
      })
    },
    dialogCloseHandler() {
      this.$refs["saveForm"].resetFields(); // 置空表单验证
    },
  },
  created() {
    this.getUserData()
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>